<!--筛选栏-->
<template>
  <view class="filterbar">
    <view class="filter" style="display: block;">
      <view class="navFilterleft" style="float:left" v-if="isFilter > 0" @click="filterSearch">
        筛选
        <text class="iconfont icon-jiantou32"></text>
      </view>
      <view class="navFilterright" style="float:right" v-if="isSort == 0" @click="sortSearch">
        排序/按 {{ sortTitle }}
        <text class="iconfont icon-jiantou32"></text>
      </view>
    </view>

    <view class="top1" :class="[filterShow == 1 ? 'filterfade_in' : '', filterShow == 0 ? 'filterfade_out' : '']" :animation="animationData.showAnim">
      <view class="filter-section">
        <h2 class="a-heading-2 filter-title">筛选</h2>
        <view class="iconfont icon-cuowu1" @click="filterClose"></view>
        <view class="filters-content">
          <view class="o-filter">
            <view class="style-dropdown filter-dropdown">
              <view class="a-label" @click="filterColor">
                <i v-if="color" class="iconfont icon-jiantou"></i>
                <i v-else class="iconfont icon-jiantouxiangshang"></i>
                <view class="s2">
                  <text class="em">颜色</text>
                  <block class="colormulti" v-for="(item, index) in checkedColor" :key="index">
                    <text class="colorShow">{{ item }}</text>
                  </block>
                </view>
              </view>

              <view v-if="color">
                <checkbox-group class="group" @change="colorChange">
                  <view class="label-1" v-for="(item, index) in colorFilter" :key="index">
                    <label v-if="filterChecked.filterChecked(colorAll, item)">
                      <block><checkbox hidden :value="item" :checked="item.checked"></checkbox></block>
                      <view class="label-1__icon">
                        <block v-if="filterChecked.filterChecked(checkedColor, item)"><view class="label-1__icon-checked"></view></block>
                        <block v-else><view></view></block>
                        <!-- <view :class="filterChecked.filterChecked(checkedColor,item) ? 'label-1__icon-checked' : ''"></view> -->
                      </view>
                      <text class="label-1__text" :class="filterChecked.filterChecked(checkedColor, item) ? 'checkedText' : ''">{{ item }}</text>
                    </label>
                    <label v-else>
                      <block><checkbox hidden :value="item" :checked="item.checked" disabled="true"></checkbox></block>
                      <view class="label-1_disabled"><view></view></view>
                      <text class="disabled_text">{{ item }}</text>
                    </label>
                  </view>
                </checkbox-group>
              </view>
              <span class="error-msg"></span>
            </view>
          </view>
          <view class="o-filter">
            <view class="style-dropdown filter-dropdown">
              <view class="a-label" @click="filterSize">
                <i v-if="size" class="iconfont icon-jiantou"></i>
                <i v-else class="iconfont icon-jiantouxiangshang"></i>
                <view class="s2">
                  <text class="em">尺码</text>
                  <block class="colormulti" v-for="(item, index) in checkedSize" :key="index">
                    <text class="colorShow">{{ item }}</text>
                  </block>
                </view>
              </view>

              <view v-if="size">
                <checkbox-group class="group" @change="sizeChange">
                  <view class="label-1" v-for="(item, index) in sizeFilter" :key="index">
                    <label v-if="filterChecked.filterChecked(sizeAll, item)">
                      <checkbox hidden :value="item" :checked="item.checked"></checkbox>
                      <view class="label-1__icon ">
                        <block v-if="filterChecked.filterChecked(checkedSize, item)"><view class="label-1__icon-checked"></view></block>
                        <block v-else><view></view></block>
                        <!-- <view :class="filterChecked.filterChecked(checkedSize,item) ? 'label-1__icon-checked' : ''"></view> -->
                      </view>
                      <text class="label-1__text" :class="filterChecked.filterChecked(checkedSize, item) ? 'checkedText' : ''">{{ item }}</text>
                    </label>

                    <label v-else>
                      <checkbox hidden :value="item" :checked="item.checked" disabled="true"></checkbox>
                      <view class="label-1_disabled"><view></view></view>
                      <text class="disabled_text">{{ item }}</text>
                    </label>
                  </view>
                </checkbox-group>
              </view>
              <span class="error-msg"></span>
            </view>
          </view>
          <view class="o-filter">
            <view class="style-dropdown filter-dropdown">
              <view class="a-label" @click="filterStyle">
                <i v-if="style" class="iconfont icon-jiantou"></i>
                <i v-else class="iconfont icon-jiantouxiangshang"></i>
                <view class="s2">
                  <text class="em">款式</text>
                  <block class="colormulti" v-for="(item, index) in checkedStyle" :key="index">
                    <text class="colorShow">{{ item }}</text>
                  </block>
                </view>
              </view>

              <view v-if="style">
                <checkbox-group class="group" @change="styleChange">
                  <view class="label-1" v-for="(item, index) in styleFilter" :key="index">
                    <label v-if="filterChecked.filterChecked(styleAll, item)">
                      <checkbox hidden :value="item" :checked="item.checked"></checkbox>
                      <view class="label-1__icon">
                        <block v-if="filterChecked.filterChecked(checkedStyle, item)"><view class="label-1__icon-checked"></view></block>
                        <block v-else><view></view></block>
                        <!-- <view :class="filterChecked.filterChecked(checkedStyle,item) ? 'label-1__icon-checked' : ''"></view> -->
                      </view>
                      <text class="label-1__text" :class="filterChecked.filterChecked(checkedStyle, item) ? 'checkedText' : ''">{{ item }}</text>
                    </label>

                    <label v-else>
                      <checkbox hidden :value="item" :checked="item.checked" disabled="true"></checkbox>
                      <view class="label-1_disabled"><view></view></view>
                      <text class="disabled_text">{{ item }}</text>
                    </label>
                  </view>
                </checkbox-group>
              </view>
              <span class="error-msg"></span>
            </view>
          </view>
          <view class="o-filter">
            <view class="style-dropdown filter-dropdown">
              <view class="a-label" @click="filterMaterial">
                <i v-if="material" class="iconfont icon-jiantou"></i>
                <i v-else class="iconfont icon-jiantouxiangshang"></i>
                <view class="s2">
                  <text class="em">材质</text>
                  <block class="colormulti" v-for="(item, index) in checkedMaterial" :key="index">
                    <text class="colorShow">{{ item }}</text>
                  </block>
                </view>
              </view>

              <view v-if="material">
                <checkbox-group class="group" @change="materiaChange">
                  <view class="label-1" v-for="(item, index) in materialFilter" :key="index">
                    <label v-if="filterChecked.filterChecked(materialAll, item)">
                      <checkbox hidden :value="item" :checked="item.checked"></checkbox>
                      <view class="label-1__icon">
                        <block v-if="filterChecked.filterChecked(checkedMaterial, item)"><view class="label-1__icon-checked"></view></block>
                        <block v-else><view></view></block>
                        <!-- <view :class="filterChecked.filterChecked(checkedMaterial,item) ? 'label-1__icon-checked' : ''"></view> -->
                      </view>
                      <text class="label-1__text" :class="filterChecked.filterChecked(checkedMaterial, item) ? 'checkedText' : ''">{{ item }}</text>
                    </label>

                    <label v-else>
                      <checkbox hidden :value="item" :checked="item.checked" disabled="true"></checkbox>
                      <view class="label-1_disabled"><view></view></view>
                      <text class="disabled_text">{{ item }}</text>
                    </label>
                  </view>
                </checkbox-group>
              </view>
              <span class="error-msg"></span>
            </view>
          </view>

          <view :class="showButton ? 'filter-buttons' : 'filter-buttonHide'">
            <button class="a-button is-secondary" @click="reset">重置</button>
            <button class="a-button is-primary" @click="submit">提交</button>
          </view>
        </view>
      </view>
    </view>

    <view class="top2" :class="[sortShow == 1 ? 'fade_in' : '', sortShow == 0 ? 'fade_out' : '']">
      <view class="product-sort-section">
        <h2 class="a-heading-2 product-sort-title">排序/按</h2>
        <view class="iconfont icon-cuowu1" @click="sortClose"></view>
        <view class="product-sort-content">
          <block>
            <view class="m-dropdown" v-for="(item, index) in sortData" :key="index">
              <text @click="orderBy" class="a-option" :class="currentType == index ? 'selected' : ''" :data-current="index + 1" :data-desc="item">{{ item }}</text>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script module="filterChecked" lang="wxs" src="../../utils/filter.wxs"></script>
<script>
import api from '@/api/api';
import tip from '@/utils/tip';
import { SYSTEM_INFO, USER_SPECICAL_INFO, MERCHANT_INFO, CART_KEY, CUSTOMER_INFO, LOWER_WX_VERSION } from '@/utils/constant';

export default {
  props: {
    cateCode: Number, // 分类id
    isSort: Number, // 是否显示排序
    isFilter: Number, // 是否显示筛选
    colorFilter: Array, // 颜色 total
    sizeFilter: Array, // 尺码 total
    styleFilter: Array, // 款式 total
    materialFilter: Array // 材质 total
  },

  data() {
    return {
      sortData: ['最佳匹配', '最新上架', '价格低至高', '价格高至低'],
      filterData: ['颜色', '尺码', '款式', '材质'],
      currentType: '',
      arrowType: '',
      flag: false,
      type: 'desc',
      sortShow: -1,
      filterShow: -1,
      sortTitle: '最佳匹配',
      color: false,
      material: false,
      size: false,
      style: false,
      showButton: false,
      checkedColor: '', //选中的color
      checkedSize: '', //选中的size
      checkedStyle: '', //选中的style
      checkedMaterial: '', //选中的material
      hidden: false,
      storeId: '',
      merchantId: '',
      filterList: [],
      sortList: [],
      colorAll: [],
      materialAll: [],
      sizeAll: [],
      styleAll: [],
      colorConcat: '',
      sizeConcat: '',
      styleConcat: '',
      materialConcat: '',
      animationData: {},
      afterPage: ''
    };
  },

  created() {
    this.checkedColor = this.checkedColor;
    this.checkedSize = this.checkedSize;
    this.checkedStyle = this.checkedStyle;
    this.checkedMaterial = this.checkedMaterial;
    let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
    this.storeId = merchantInfo.cloudMerchantStoreId;
    this.merchantId = merchantInfo.cloudMerchantId;
  },

  methods: {
    // 按筛选条件查找
    getfilterItems: async function(class_id, store_id, is_sort, color_filter, material_filter, size_filter, style_filter) {
      let that = this;
      let page_size = 10;
      let after = that.currentPage == 1 ? '' : that.afterPage
      that.$commonFunction.getGoodsListFilter(class_id, color_filter, material_filter, size_filter, style_filter).then((res) => {
        let filterList = res.data;
        if (
          filterList.color_filter_data != undefined ||
          filterList.material_filter_data != undefined ||
          filterList.size_filter_data != undefined ||
          filterList.style_filter_data != undefined
        ) {
          that.colorAll = filterList.color_filter_data;
          that.materialAll = filterList.material_filter_data;
          that.sizeAll = filterList.size_filter_data;
          that.styleAll = filterList.style_filter_data;
        } else {
          that.colorAll = filterList.valid_color_filter_data;
          that.materialAll = filterList.valid_material_filter_data;
          that.sizeAll = filterList.valid_size_filter_data;
          that.styleAll = filterList.valid_style_filter_data;
        }
      }).catch((err) => {
        // that.showLoaded = false
        // tip.plainText(err.data.msg)
      })
      // const filterItems = await api.getGoodsList({
      //   query: {
      //     class_id: class_id || '',
      //     store_id: store_id,
      //     merchant_id: this.merchantId,
      //     page_no: 1,
      //     page_size: page_size,
      //     is_sort: is_sort,
      //     color_filter: color_filter,
      //     material_filter: material_filter,
      //     size_filter: size_filter,
      //     style_filter: style_filter
      //   }
      // });
      // if (filterItems.code === 1000) {
      //   let filterList = filterItems.data;
      //   if (
      //     filterList.color_filter_data != undefined ||
      //     filterList.material_filter_data != undefined ||
      //     filterList.size_filter_data != undefined ||
      //     filterList.style_filter_data != undefined
      //   ) {
      //     that.colorAll = filterList.color_filter_data;
      //     that.materialAll = filterList.material_filter_data;
      //     that.sizeAll = filterList.size_filter_data;
      //     that.styleAll = filterList.style_filter_data;
      //   } else {
      //     that.colorAll = filterList.valid_color_filter_data;
      //     that.materialAll = filterList.valid_material_filter_data;
      //     that.sizeAll = filterList.valid_size_filter_data;
      //     that.styleAll = filterList.valid_style_filter_data;
      //   }
      // }
    },

    colorChange: function(e) {
      var checked = e.detail.value;
      this.checkedColor = checked;
      let colorConcat = checked.join('##');
      this.colorConcat = colorConcat;
      this.showButton = true;
    },
    sizeChange(e) {
      var checked = e.detail.value;
      this.checkedSize = checked;
      let sizeConcat = checked.join('##');
      this.sizeConcat = sizeConcat;
      this.showButton = true;
    },
    styleChange(e) {
      var checked = e.detail.value;
      this.checkedStyle = checked;
      this.styleConcat = checked.join('##');
      this.showButton = true;
    },
    materiaChange(e) {
      var checked = e.detail.value;
      this.checkedMaterial = checked;
      this.materialConcat = checked.join('##');
      this.showButton = true;
    },
    // 筛选
    filterColor() {
      this.color = !this.color;
      if (this.color == true) {
        this.size = false;
        this.style = false;
        this.material = false;
        this.getfilterItems(this.cateCode, this.storeId, '', this.colorConcat, this.materialConcat, this.sizeConcat, this.styleConcat);
      }
    },

    filterSize() {
      this.size = !this.size;
      if (this.size == true) {
        this.color = false;
        this.style = false;
        this.material = false;
        this.getfilterItems(this.cateCode, this.storeId, '', this.colorConcat, this.materialConcat, this.sizeConcat, this.styleConcat);
      }
    },
    filterStyle() {
      this.style = !this.style;
      if (this.style == true) {
        this.color = false;
        this.size = false;
        this.material = false;
        this.getfilterItems(this.cateCode, this.storeId, '', this.colorConcat, this.materialConcat, this.sizeConcat, this.styleConcat);
      }
    },
    filterMaterial() {
      this.material = !this.material;
      if (this.material == true) {
        this.color = false;
        this.size = false;
        this.style = false;
        this.getfilterItems(this.cateCode, this.storeId, '', this.colorConcat, this.materialConcat, this.sizeConcat, this.styleConcat);
      }
    },
    reset() {
      this.checkedColor = '';
      this.checkedSize = '';
      this.checkedStyle = '';
      this.checkedMaterial = '';
      this.colorConcat = '';
      this.sizeConcat = '';
      this.styleConcat = '';
      this.materialConcat = '';
      this.showButton = false;
      this.color = false;
      this.size = false;
      this.style = false;
      this.material = false;
      this.filterShow = 0;
      this.$emit('arrowType', {
        type: 'filter',
        color_filter: this.colorConcat,
        material_filter: this.materialConcat,
        size_filter: this.sizeConcat,
        style_filter: this.styleConcat
      });
    },
    submit() {
      this.filterShow = 0;
      this.$emit('arrowType', {
        type: 'filter',
        color_filter: this.colorConcat,
        material_filter: this.materialConcat,
        size_filter: this.sizeConcat,
        style_filter: this.styleConcat
      });
      this.showButton = false;
      this.color = false;
      this.size = false;
      this.style = false;
      this.material = false;
    },

    filterSearch() {
      if (this.checkedColor != '' || this.checkedSize != '' || this.checkedStyle != '' || this.checkedMaterial != '') {
        this.showButton = true;
      }
      this.filterShow = 1;
    },
    filterClose() {
      this.showButton = false;
      this.color = false;
      this.size = false;
      this.style = false;
      this.material = false;
      this.filterShow = 0;
      this.$emit('arrowType', {
        type: 'filter',
        type: 'filter',
        color_filter: this.colorConcat,
        material_filter: this.materialConcat,
        size_filter: this.sizeConcat,
        style_filter: this.styleConcat
      });
    },
    // 排序
    sortSearch() {
      this.sortShow = 1;
    },

    sortClose() {
      this.sortShow = 0;
    },

    orderBy(e) {
      let that = this;
      that.currentType = e.target.dataset.current;
      that.sortTitle = e.target.dataset.desc;
      this.$emit('currentType', {
        is_sort: that.currentType
      });
      this.sortShow = 0;
    }
  },

  watch: {
    isSort: function(newVal, oldVal) {
      this.isSort = newVal;
    },
    isFilter: function(newVal, oldVal) {
      this.isFilter = newVal;
    },
    cateCode: function(newVal, oldVal) {
      this.cateCode = newVal;
      if (newVal != '') {
        this.colorConcat = '';
        this.sizeConcat = '';
        this.styleConcat = '';
        this.materialConcat = '';
        this.checkedColor = '';
        this.checkedSize = '';
        this.checkedStyle = '';
        this.checkedMaterial = '';
        this.currentType = '';
        this.sortTitle = '最佳匹配';
      }
    }
  }
};
</script>

<style lang="less">
.filter {
  background: #fff;
  margin: 0 16rpx;
  margin-top: 20rpx;
  height: 60rpx;

  .icon-jiantou32 {
    margin-left: 10rpx;
  }

  .navFilterleft {
    color: #444;
    font-size: 26rpx;
    padding: 12rpx 8rpx 24rpx;
  }

  .navFilterright {
    color: #444;
    font-size: 26rpx;
    padding: 12rpx 8rpx 24rpx;
  }
}

/* 筛选样式 */
.top1 {
  z-index: 2007;
  left: -100%;
  background-color: #fff;
  padding: 0;
  position: fixed;
  overflow-y: auto;
  top: 0;
  width: 100%;
  height: 100%;
}

.top1 .filter-section {
  padding: 160rpx 24rpx 150rpx 24rpx;
}

.top1 .filter-title {
  color: #444;
  font-size: 26rpx;
  padding: 15px 0 30px;
  border-bottom: 1px solid #e0e0e0;
  display: block;
}

.top1 .filter-dropdown {
  border-bottom: 1px solid #e0e0e0;
  background-color: transparent;
  color: #999;
  width: 100%;
  padding: 10rpx 0 0 0;
}

.top1 .filter-dropdown .list-wrapper {
  background-color: #fff;
  border: none;
  position: static;
  max-height: none;
  height: auto;
  overflow: hidden;
}

.top1 .filter-dropdown .a-label {
  font-size: 12px;
  height: 90rpx;
  padding: 30rpx 0;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}

.top1 .filter-dropdown .a-label .s3 {
  position: absolute;
  right: 0;
  background-color: #fff;
}

.top1 .filter-dropdown .a-label .em {
  font-size: 26rpx;
  padding-right: 10rpx;
}

.top1 .filter-dropdown .a-label .colorShow {
  padding-right: 10rpx;
  margin-right: 10rpx;
  border-right: 1px solid #e7e7e7;
}

.top1 .filter-dropdown .a-label .colorShow:last-child {
  border: none;
}

.s2 {
  display: inline-block;
  width: 88%;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top1 .ng-tns {
  padding: 30rpx 0;
}

.top1 .bottom-option,
.top2 .bottom-option {
  font-size: 12px;
}

.icon-cuowu1 {
  font-size: 68rpx;
  position: absolute;
  cursor: pointer;
  right: 15rpx;
  top: 160rpx;
}

/* 排序样式 */
//display: none;
.top2 {
  z-index: 2006;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0;
  position: fixed;
  top: 0;
  right: -100%;
}

.top2 .product-sort-title {
  color: #444;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.0825em;
  text-transform: uppercase;
  padding: 15px 0 20px;
  margin-bottom: 15px;
  text-align: left;
  display: block;
}

.top2 .product-sort-section {
  padding: 160rpx 24rpx 0 24rpx;
}

.top2 .a-option {
  line-height: 15px;
  text-transform: capitalize;
  padding: 15px 0 3px;
  display: block;
  font-size: 12px;
  color: #999;
}

.m-dropdown {
  padding: 12rpx 18rpx 2rpx 0;
}

.top2 .selected {
  color: #999;
}

.label-1 {
  margin-bottom: 15px;
}

.label-1__text {
  color: #999;
  display: inline-block;
  vertical-align: middle;
}

.label-1__icon {
  position: relative;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  width: 60rpx;
  height: 60rpx;
  background: #ccc;
}

.checkedText {
  color: #444;
}

.label-1__icon-checked {
  position: absolute;
  top: 0;
  left: 0;
  width: 60rpx;
  height: 60rpx;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  background-color: #f89f1b;
}

.icon-jiantou,
.icon-jiantouxiangshang {
  position: absolute;
  right: 8rpx;
  top: 30rpx;
}

.label-1_disabled {
  position: relative;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  width: 60rpx;
  height: 60rpx;
  background: #eee;
}

.disabled_text {
  color: #eee;
  display: inline-block;
  vertical-align: middle;
}

.filter-buttons {
  border-top: 1px solid #e0e0e0;
  z-index: 1007;
  position: fixed;
  width: 100%;
  bottom: 0;
  padding: 30rpx 0;
  left: 0;
  display: flex;
  background-color: #fff;
}

.filter-buttonHide {
  display: none;
}

.filter-buttons .a-button {
  padding: 24rpx 18rpx 16rpx;
  text-align: center;
  width: 46%;
  margin: 0;
  margin-left: 20rpx;
  line-height: 28rpx;
}

.filter-buttons .a-button.is-secondary {
  background-color: #fff;
  color: #ccc;
  border: 1px solid #e7e7e7;
}

.filter-buttons .a-button.is-primary {
  color: #fff;
  background-color: #444;
  border: 1px solid #444;
}

.fade_in {
  animation: mymove 1s 1;
  animation-fill-mode: forwards;
  position: fixed;
}
@keyframes mymove {
  from {
    right: -100%;
  }
  to {
    right: 0%;
  }
}

.fade_out {
  animation: mymoveout 1s 1;
  animation-fill-mode: forwards;
  position: fixed;
}

@keyframes mymoveout {
  from {
    right: 0%;
  }
  to {
    right: -100%;
  }
}

.filterfade_in {
  animation: mymoveFilter 1s 1;
  animation-fill-mode: forwards;
  position: fixed;
}
@keyframes mymoveFilter {
  from {
    left: -100%;
  }
  to {
    left: 0%;
  }
}

.filterfade_out {
  animation: mymoveoutFilter 1s 1;
  animation-fill-mode: forwards;
  position: fixed;
}

@keyframes mymoveoutFilter {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}
</style>
